import React from 'react'
import { Link, useLocation } from 'react-router-dom'
import classNames from 'classnames'
import { Wrapper } from './style'
const Footer: React.FC = () => {
  const { pathname } = useLocation();
  return (
    <Wrapper>
      <Link to="/home"
        className={classNames({
          active: pathname == "/home" || pathname == "/"
        })}>
        <i className="iconfont icon-shouye"></i>
        <span>首页</span>
      </Link>
      <Link to="/find"
        className={classNames({
          active: pathname == "/find"
        })}
      >
        <i className="iconfont icon-faxian"></i>
        <span>发现</span>
      </Link>
      <Link to="/goods"
        className={classNames({
          active: pathname == "/goods"
        })}>
        <i className="iconfont icon-shangpin"></i>
        <span>商品</span>
      </Link>
      <Link to="/me"
        className={classNames({
          active: pathname == "/me"
        })}>
        <i className="iconfont icon-wode"></i>
        <span>我的</span>
      </Link>
    </Wrapper>

  )
}

export default Footer